@import url(common.css);
@import url(nav-top.css);
body {
    font-family: "Microsoft YaHei", "微软雅黑", Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
    background: #fff;
}
.animated{display: none;}
/*大图轮播*/
.visiblexs{display: none!important;}
.test1,.test1 .column,.test1 .carousel{height: 100%}
.test1 .carousel-inner>.item>a>img,.test1 .carousel-inner>.item>img{height:100%;}
.glyphicon-chevron-right:before,.glyphicon-chevron-left:before{display:none;}
.fp-controlArrow.fp-prev,.fp-controlArrow.fp-next{display: none;}
.carousel-control .glyphicon-chevron-left{border: none; right: 5%; background: url(../images/medialeft.png) center center no-repeat; background-size: 26px;}
.carousel-control .glyphicon-chevron-right{border: none;background: url(../images/mediaright.png) center center no-repeat;background-size: 26px; left: 5%;}
.carousel-control {
width:5%}
    .carousel-control.right, .carousel-control.left {
        background: none !important
    }

    .page1 .carousel-caption {
        left: 0;
        top: 35%;
        width: 100%;
    }
.le{position:absolute;top:0px; left:12%;width: 40%; max-width: 500px; }
.re{position:absolute;top:-10%; right:15% ;width: 50% ;max-width: 650px; }
.le img,.re img{width: 100%}

.item1 .le img{width: 80%}

.carousel-inner .active .re, .carousel-inner .active .le {
    display: block
}


.page1 .carousel-inner,.page1 .carousel-inner .item {height: 100%}


.page1 .column .fp-scrollable{overflow: auto;}
/*第二屏*/
.page2 {width: 100%; overflow: hidden;}
.page2  .row {padding-top:8%; width: 100%;max-width: 1200px; margin: 0px auto}
.page2  .row h3{text-align:center; color: #463c57; font-size:36px; font-weight: bold; line-height: 60px;height: 60px; }
.article-list{position:relative}
.bloglist{margin-top:80px; width: 100%;float: left;}
.bloglist .article-item{overflow:hidden; margin-bottom: 25px; border-bottom: 1px solid #fbfbfb; padding-bottom: 25px;}
.bloglist .article-item .cover{padding-left: 0px;}
.bloglist .img-light img{width: 100%;min-height: 130px;}
.bloglist .content .title{overflow: hidden;display: inline-block; width: 100%; line-height: 45px; height: 45px; margin-top: -6px; color: #333;font-weight: bold;font-size: 18px;text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}
.bloglist .content .des{color: #888888; font-size:14px; line-height: 26px;    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}

.bloglist .content .read-more{font-size: 14px; color: #888; height: 32px;line-height: 32px;margin-top:5px; border-top: 1px solid #fbfbfb; }
.bloglist .content .read-more .tag{color: #888;font-size: 14px;}
    .bloglist .content .read-more .tag i {
    margin-right:5px;}
    .bloglist .content .read-more .read {
        float: right;
    }
.bloglist .content .read-more .time{float: right;margin-right: 10px;}

.mores {
    text-align: center;
    padding: 10px 20px;
}
.more {
    padding: 10px 20px;
    background: #ffaf26;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
}
    .more:hover {
        background: #463c57;
        color: #fff;
    }
    /*第三屏*/
    .page3 {
        width: 100%;
        overflow: hidden;
    }
.page3   h3{text-align:center; color: #463c57; font-size:36px; font-weight: bold; line-height: 60px;height: 60px;margin-top:5%;}
.page3 .box {    position: relative; padding-top:50px;     float: left;
    width: 100%;}
.page3 .box .des{display:none;}
.page3 .box .box-left{position: relative;height: 530px;right: 50px; }
.page3 .box .left-a1{width: 641px; height: 263px; position:absolute;bottom: 200px;z-index: 6;right: 160px;}
.page3 .box .left-a2{width: 641px; height: 263px; position:absolute;bottom: 150px;z-index: 5;right: 140px;}
.page3 .box .left-a3{width: 641px; height: 263px; position:absolute;bottom: 100px;z-index: 4;right: 120px;}
.page3 .box .left-a4{width: 641px; height: 263px; position:absolute;bottom: 65px;z-index: 3;right: 100px;}
.page3 .box .left-a5{width: 641px; height: 263px; position:absolute;bottom: 10px;right: 80px;}

.page3 .box  .box-right .title{font-size:30px; color: #666;}
.page3 .box  .box-right{margin-top:80px;}
.page3 .box  .box-right  .right-a1,
.page3 .box  .box-right  .right-a2,
.page3 .box  .box-right  .right-a3,
.page3 .box  .box-right  .right-a4,
.page3 .box  .box-right  .right-a5 {height: 100px;}
.page3 .box  .box-right  .right-a1 .title,
.page3 .box  .box-right  .right-a2 .title,
.page3 .box  .box-right  .right-a3 .title,
.page3 .box  .box-right  .right-a4 .title,
.page3 .box  .box-right  .right-a5 .title{height: 40px;line-height: 40px; margin-left: 40px;}
.page3 .box  .box-right  .right-a1 .des,
.page3 .box  .box-right  .right-a2 .des,
.page3 .box  .box-right  .right-a3 .des,
.page3 .box  .box-right  .right-a4 .des,
.page3 .box  .box-right  .right-a5 .des{
    line-height: 30px;margin-top:10px;color: #888;font-size: 14px; margin-left: 60px;
}

.page3 .box .box-right i{width:40px;height:40px;line-height:40px;display: block;
    position: absolute;font-size: 30px; color: #333;
    float: left; text-align: center;}
   /* .page3 .box  .box-right  .right-a1 i{background: url(../images/iocn1.png) no-repeat -10px 10px;}
    .page3 .box  .box-right  .right-a2 i{background: url(../images/iocn1.png) no-repeat -6px -68px;}
    .page3 .box  .box-right  .right-a3 i{background: url(../images/iocn1.png) no-repeat 0px -135px; background-size: 91%}
    .page3 .box  .box-right  .right-a4 i{background: url(../images/iocn1.png) no-repeat -3px -296px;}
    .page3 .box  .box-right  .right-a5 i{background: url(../images/iocn1.png) no-repeat -3px -376px;}*/
/*第4屏*/
.page4 {background: #000000;width: 100%; overflow: hidden;}
.page4  .row {padding-top:200px; width: 100%;max-width: 1200px; margin: 0px auto}
.page4  .row h3{display: none;text-align:center; color: #fff; font-size:36px; font-weight: bold; line-height: 60px;height: 60px;}
.page4 .box{text-align: center;margin-top:50px;}

/*.page3 .box .right-a1:hover  .des{display: block;}
.page3 .box  .right-a1:hover .xx{display: block;}
.page3 .box .right-a1:hover+.left-a1{ right: 150px; } */
/*第5屏*/
.page5 {width: 100%; overflow: hidden;}

.page5  .row {padding:0px; padding-top:120px; width: 100%; margin: 0px auto;}
.page5  .row h3{display: none;text-align:center; color: #463c57; font-size:36px; font-weight: bold; line-height: 60px;height: 60px;}
.page5 .box{margin-top:50px; overflow: hidden;}
.page5 .box .left-a{padding: 0px;    position: relative; }
.page5 .box .left-a .leftimg{text-align: center;overflow: hidden; height: 550px;}
    .page5 .box .left-a span {
        position: absolute;
        left: 20px;
        color: #fff;
        font-size: 24px;
        top: 25px;
        line-height: 70px;
        background: url(../images/x.png) no-repeat 0 bottom;
    }
.page5 .box .left-a img,.page5 .box .right-a li img{height: 100%; display: table-cell; /*主要是这个属性*/ vertical-align: middle;width: 100%;}
.page5 .box .right-a{padding: 0px;}
.page5 .box .right-a li{height: 275px; padding: 0;position: relative;}


.page5 .box .right-a img{width: 100%}
    .page5 .box .right-a span {
        position: absolute;
        left: 20px;
        color: #fff;
        font-size: 24px;
        top: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        line-height: 70px;
        background: url(../images/x.png) no-repeat 0 bottom;
    }
.page5  a:hover img{opacity: 0.5}
/*第6屏*/
.page6 {background: url(../images/bottom.png) no-repeat center 25px;width: 100%; overflow: hidden; background-size: cover;}
.page6  .row {padding-top:0px; width: 100%;max-width: 1200px; margin: 0px auto}
.page6 .row h3{display: none;text-align:center; color: #fff; font-size:36px; font-weight: bold; line-height: 60px;height: 60px;}
.page6 .box{text-align: center;margin-top:50px; overflow: hidden;}
.page6 .box li{margin-bottom: 40px}
    .page6 .box li span {
        display: inline-block;
        overflow: hidden;
        background: #fff;
        line-height: 160px;
        border-radius: 50%;
        width: 160px;
        height: 160px;
    }
    .page6 .box li span img {
        width: 100%
    }

    .page6 li span:hover img {
        opacity: 0.5
    }
/*底部*/
.footer{background: url(../images/bottom1.png); position:absolute;bottom: 0px;width: 100%;height: 178px;color: #fff; font-size: 16px;line-height: 40px;}
.footer .row{ width: 100%;max-width: 1200px; margin: 0px auto; overflow:hidden;}
.footer .row .footer-a{overflow:hidden; padding:20px 0;}
.footer .row .ewm{ text-align: right; }
.footer .row .footer-b{height:50px; line-height: 50px; text-align:center; border-top: 1px solid #ccc}


.page2 h3.active,.page3 h3.active ,.page4 h3.active ,.page5 h3.active,.page6 h3.active{display: block;}
.bloglist .article-item.active, .page3 .box .box-left.active, .page3 .box .box-right.active, .page4 .box.active,
.page5 .left-a.active, .page5 .right-a.active, .page6 .box.active, .footer.active, .mores.active {
    display: block;
}
@media (max-width: 1400px) {
.le{max-width: 400px; }
.re{max-width: 450px; }

}

@media (max-width: 1200px) {
/*.test1 .carousel-inner>.item>a>img,.test1 .carousel-inner>.item>img{height:100%;object-fit: contain;}*/
}
@media (max-width: 1100px) {
/*.test1,.test1 .column,.test1 .carousel{height: auto;}
.test1 .carousel-inner>.item>a>img,.test1 .carousel-inner>.item>img{height:auto; }*/

.page2 .row {
 

}



}
@media (max-width: 1024px) {
    .hiddenxs{display: none!important;}
    .visiblexs{display: block!important;}
       .moblie_head {
        display: inline-block;
        background: #463c57;
        height: 55px;
    }
.fp-tableCell{display: block}
.bloglist .img-light img{width: 100%;min-height: 100px;}
.bloglist{margin-top:40px;}
.page3 .box .box-right .title{font-size: 22px;}
.page1 .carousel-caption{top: 15%;}
.le{max-width: 70%; width: 100%; }
.re{max-width: 70%; width: 100%;top:40%; left: 10%;}
.page3 .box .box-right .right-a1 .des, .page3 .box .box-right .right-a2 .des, .page3 .box .box-right .right-a3 .des, .page3 .box .box-right .right-a4 .des, .page3 .box .box-right .right-a5 .des{
    margin-left：0
}
}

@media (max-width: 1023px) {

   

}

@media (max-width: 991px) {
    .page3 .box .box-left{position: inherit;left: 0px;}
.page3 .box .box-left img{width: 100%}
.page3 .box .left-a1{width: 100%; height: 50px; right: 150px; bottom: 450px;}
.page3 .box .left-a2{width: 100%; height: 50px; right: 150px;bottom: 400px;}
.page3 .box .left-a3{width: 100%; height: 50px; right: 150px; bottom: 350px;}
.page3 .box .left-a4{width: 100%; height: 50px; right: 150px;bottom: 300px;}
.page3 .box .left-a5{width: 100%; height: 50px; right: 150px; bottom: 250px;}
.page4 .box img{width: 100%}
}
@media (max-width: 768px) {
    .fp-slidesContainer{ width: 100%!important }
    .test1, .test1 .column, .test1 .carousel{width: 101%!important}
    .test1 .carousel-inner>.item>a>img, .test1 .carousel-inner>.item>img{width: 100%}
.page2 .row h3{font-size: 24px; }

.bloglist .content .title{font-size: 16px;line-height: 30px;height: 30px;}
.bloglist .content .des{font-size: 12px; line-height: 22px;}
.bloglist .content .read-more{font-size: 12px;}
.page3 .box .box-right .right-a1, 
.page3 .box .box-right .right-a2, 
.page3 .box .box-right .right-a3, 
.page3 .box .box-right .right-a4, 
.page3 .box .box-right .right-a5{
    height: 45px;
}
.page3 .box .box-right .right-a1 .title,
 .page3 .box .box-right .right-a2 .title,
  .page3 .box .box-right .right-a3 .title, 
  .page3 .box .box-right .right-a4 .title, 
  .page3 .box .box-right .right-a5 .title{
    height: 45px;line-height: 45px;
}

.page3 .box .box-right .title{font-size: 16px;}
.page3 .box .des{display: none!important;}
.page3  h3 {
    font-size: 24px;margin-top:100px;
}
.page4 .row h3 {
    font-size: 24px;margin-top:20%;
}
.page4 .row{padding-top:0px;}

.page5 .row{padding-top:45px;}
.page5 .row h3 {
    font-size: 24px;margin-top:5%;}

.page5 .box .right-a img{min-height: 145px}

.page5 .box .left-a span,.page5 .box .right-a span{font-size: 18px; text-shadow: 2px 2px 1px #333;top:5px }
.page5 .box{margin-top:0px;}
.page6 .row{padding-top:0px;margin-top: -80px;}
.page6 .row h3 {
    font-size: 24px;margin-top:0px;}
    .page6 .box a{height: 80px; width: 80px;}
    .page6 .box li{margin-bottom: 20px}
    .page5 .box .left-a .leftimg{min-height: 320px; max-height: 350px;}
    .page5 .box .right-a li{height: 210px;}
    .page5 .box .right-a li,.page5 .box .left-a .leftimg{padding: 0px;}
    .footer{line-height: 30px;}
}

@media (max-width: 580px) {

.le {
    max-width: 84%;
    width: 100%;
    left: 5%;
}

    .page2 .row { padding-top: 80px;}
    .bloglist .img-light img{min-height: 80px;}
    .bloglist .content{padding: 0px;}
    .bloglist .content .des{line-height: 20px;}
    .bloglist .content .read-more{height: 22px; line-height: 22px;}
    .bloglist .article-item{    padding-bottom: 15px; margin-bottom: 15px;}
.bloglist .content .read-more .tag{font-size: 12px;}

.page3 .box{padding-top:0;}
   .page3 .box .box-left img{max-width: 380px;} 
   .page3 .box .box-right i{width: 30px; height: 30px;font-size: 20px;}
.page3 .box .box-right .title{margin-left: 35px; font-size: 14px;}

.page3 .box .box-left{height: 405px;margin-top:0px;}
.page3 .box .left-a1,.page3 .box .left-a2,.page3 .box .left-a3,.page3 .box .left-a4,.page3 .box .left-a5{left:0;}
.page3 .box .box-right i{display: none;}
.page3 .box .left-a1{bottom: 290px;}
.page3 .box .left-a2{bottom: 260px;}
.page3 .box .left-a3{bottom: 230px;}
.page3 .box .left-a4{bottom: 210px;}
.page3 .box .left-a5{bottom: 175px;}
.page3 .box .box-right .title{
    margin-left: 0px!important
}
.page3 .box .box-right{margin-top:0;}


.page4 .row{padding-top: 150px;}
.page5 .row{padding-top: 0px;}
.page5 .row h3 {
    margin-top: 18%;
}
.page5 .box .left-a span{font-size: 18px; text-shadow: 2px 2px 1px #333;}
.page5 .box .right-a li, .page5 .box .left-a .leftimg{padding: 5px;}
.page5 .box .left-a .leftimg {
    min-height: 160px;
    max-height: 220px;
}
.page5 .box{margin-top:10px;}
.page5 .box .right-a li {
    height: 100%; max-height: 145px;
}
.page6 .row{padding-top: 20%;
    margin-top: 0;}
.page6 .row h3 {
    margin-top: 0;
}
.page6 .box li span{width: 100%;
    height: 115px;
    line-height: 115px;}
.page3 .box .box-right .right-a1, .page3 .box .box-right .right-a2, .page3 .box .box-right .right-a3, .page3 .box .box-right .right-a4, .page3 .box .box-right .right-a5{
    height: 35px;line-height: 35px; padding: 0px;
   }
.page3 .box .box-right { margin-top: -20px;}
.page6 .box{margin-top:30px;}
.page6 .footer .row {padding-top: 0;
    margin-top: 0;}
.footer{font-size: 14px;line-height: 30px;}
.footer .row .ewm,.footer .row .footer-b{display: none;}
}
@media (max-width: 320px) {
   .page3 .box .box-left{height: 350px;}
   .page3 h3{margin-top: 90px;}
   
.page5 .box .left-a .leftimg {
    min-height: 120px;
    max-height: 180px;
}
.page5 .box .right-a img {
    height: 90px;  max-height:80px;   min-height:80px;}
    .page6 .box a{width: 60px;height: 60px;}
    .page6 .box li {
    margin-bottom: 15px;
}
}
@media (max-width: 400px) {
  
}